<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../three.min.js"></script>
    <script src="../Stats.js" data-ke-src="../Stats.js"></script>
</head>
<body>
    <script>
        const width = window.innerWidth
        const height = window.innerHeight
        var material
        var scene,renderer,camera,mesh,stats;
        function init() {
            renderer = new THREE.WebGLRenderer({antialias:false})
            renderer.setSize(width,height)
            document.body.appendChild(renderer.domElement)

            camera = new THREE.PerspectiveCamera(45,width/height,0.1,2000)
            camera.position.set(0,0,1800)
            camera.up.set(0,1,0)

            scene = new THREE.Scene()

            stats = new Stats()
            stats.domElement.style.position = "absolute"
            stats.domElement.style.top = "0px"
            stats.domElement.style.left = "0px"
            document.body.appendChild(stats.domElement)

            var pointNum = 1000000
            var n = 800,n2=400
            var position = new Float32Array(pointNum*3)
            var color = new Float32Array(pointNum*3)
            for(let i = 0;i <pointNum*3;i+=3) {
                var x = Math.random()*n-n2
                var y = Math.random()*n-n2
                var z = Math.random()*n-n2

                var r = x/n + 0.5
                var g = y/n + 0.5
                var b = z/n + 0.5

                position[i] = x
                position[i+1] = y
                position[i+2] = z
                color[i] = r
                color[i+1] = g
                color[i+2] = b
            }
            var geometry = new THREE.BufferGeometry()
            geometry.setAttribute("position",new THREE.BufferAttribute(position,3))
            geometry.setAttribute("color",new THREE.BufferAttribute(color,3))
            console.log(geometry)

            material = new THREE.PointsMaterial({
                vertexColors: THREE.VertexColors,
                size: 1,
            })

            mesh = new THREE.Points(geometry,material) 
            console.log(mesh)
            scene.add(mesh)
        }
        function animate() {
            requestAnimationFrame(animate)
            stats.begin()
            mesh.rotation.y = mesh.rotation.y + 0.01
            mesh.rotation.z = mesh.rotation.z + 0.01
            renderer.render(scene,camera)
            stats.end()
        }
        init()
        animate()
    </script>
</body>
</html>